<template>
    <div>
        <el-row>
            <el-col>
                <el-table
                        class="headerTable"
                        border
                        size="small"
                        style="width: 100%">
                    <el-table-column width="120" label="系别：机电系"></el-table-column>
                    <el-table-column width="60"></el-table-column>
                    <el-table-column  :label="yearTitle" align="center">
                    </el-table-column>
                </el-table>
                <el-table
                        v-if="tableShow"
                        :data="tableData"
                        border
                        ref="table"
                        size="small"
                        style="width: 100%">
                    <el-table-column width="120" prop="CLASSESNAME" align="center">
                    </el-table-column>
                    <el-table-column align="center" prop="NUM" width="60" label="人数"></el-table-column>
                    <el-table-column v-for="(item, i) in titleData" :label="item.NUM" align="center">
                        <el-table-column :label="item.NAME" align="center">
                            <template slot-scope="scope">
                                <span v-for="num in scope.row.list[i].CATEGORY.split(',')">
                                    <b v-if="num === '1'">О</b>
                                    <b v-if="num === '2'">X</b>
                                    <b v-if="num === '3'">※</b>
                                    <b v-if="num === '4'">▲</b>
                                    <b v-if="num === '5'">☆</b>
                                    <b v-if="num === '6'">★</b>
                                    <b v-if="num === '7'">◎</b>
                                    <b v-if="num === '8'">■</b>
                                    <b v-if="num === '9'">#</b>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "classSchedule",
        data() {
            return {
                tableShow: false,
                tableData: [],
                yearAndMonth: {},
                titleData: [],
                yearTitle: ''
            }
        },
        created() {
            this.$post('/public/findNowYearAndTerm').then(res => {
                this.yearAndMonth = res.data.data;
                this.yearTitle = `${this.yearAndMonth.now_year}学年第${this.yearAndMonth.now_term}学期教学进度安排表`;
                this.$post('/courseSchedule/findCourseDate',{
                    year: this.yearAndMonth.now_year,
                    term: this.yearAndMonth.now_term
                }).then(res => {
                    this.titleData = res.data.data;
                })
                this.$post('/courseSchedule/findCourseSchedule', {
                    year: this.yearAndMonth.now_year,
                    term: this.yearAndMonth.now_term
                }).then(res => {
                    /*for(let i = 0; i < res.data.data.length; i++) {
                        res.data.data[i].list.map(item =>  {item.CATEGORY.join()})
                    }*/
                    this.tableData = res.data.data;
                    this.tableShow = true;
                })
            })
        },
        methods: {
            arraySpanMethod ({row, column, rowIndex, columnIndex}) {
                //console.log(row, column, rowIndex, columnIndex)
                if(rowIndex <= 4 && columnIndex >= 2) {
                    if(columnIndex === 2) {
                        return [1,15]
                    } else if(columnIndex >= 2 && columnIndex <= 16){
                        return [0, 0]
                    } else if(columnIndex >= 16) {
                        return [5,4]
                    }
                }

            }
        },
        mounted() {
        }
    }
</script>

<style scoped lang="scss">
    .headerTable {
        /deep/.el-table__body-wrapper {
            display: none;
        }
    }
    /deep/.el-table thead.is-group th {
        background: #fff;
    }
    /deep/.el-table thead.is-group tr:first-of-type th:first-of-type:before {
        content: '班级';
        text-align: center;
        position: absolute;
        width: 152px;
        height: 1px;
        bottom: 30px;
        right: 0;
    }

    /deep/.el-table thead.is-group tr:first-of-type th:first-of-type:after {
        content: '日期(周次)';
        text-align: center;
        position: absolute;
        width: 152px;
        top: 10px;
        left: 0;
    }

    /deep/.el-table thead.is-group tr:first-of-type th:first-of-type .cell {
        position: absolute;
        top: 0;
        left: 0;
        width: 152px;
        height: 1px;
        background-color: #EBEEF5;
        display: block;
        text-align: center;
        transform: rotate(33deg);
        transform-origin: top left;
        -ms-transform: rotate(33deg);
        -ms-transform-origin: top left;
        -webkit-transform: rotate(33deg);
        -webkit-transform-origin: top left;
    }
    /deep/.el-table th.gutter{
        display: table-cell!important;
    }

    /deep/.el-table colgroup.gutter {
        display: table-cell !important;
    }
</style>
